<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .test{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <!-- <div id="test">
            <p>abc</p>
            <p>def</p>
        </div>
        <a href="#" name='link'>aaa</a>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="test2">test2-1</div>
        <div class="test2">test2-2</div> -->
        <div id="node"></div>
    </body>
    <script>
        // var test1 = document.getElementById('test');
        // console.log(test1.innerText)
        // console.log(test1.innerHTML)
        // test1.innerHTML = '<p>aaa</p>'
        // console.log(test1.innerHTML)


        // var test = document.getElementsByClassName("test2")[0]
        // var sec = document.createElement("section")
        // sec.innerText = "dasdada"
        // test.appendChild(sec)

        var sec = document.createElement("section")
        sec.classList.add("test")
        sec.innerText = "这是一个section，他的类是test"
        var div = document.getElementById("node")
        div.appendChild(sec)
    </script>
</html>